<template>
  <a-drawer
      title="申请单详情"
      placement="right"
      :open="props.visible"
      width="75%"
      class="requirement-detail-drawer"
      style="background:rgba(237,237,237,0)"
      @close="onClose"
      :closable="false"
  >
    <div class="requirement-panel">
      <div class="requirement-panel-item">
        <div class="department-selector">
          <a-select
              v-model:value="selectedDepartment"
              show-search
              placeholder="请输入部门名称搜索"
              :filter-option="false"
              :not-found-content="fetching ? undefined : null"
              @search="onDepartmentSearch"
              @change="(value:any, _option:any) => onDepartmentChange(value)"
              @blur="onDepartmentBlur"
              class="department-select"
              popupClassName="custom-dropdown"
              :disabled="isDisabled"
          >
            <a-select-option
                v-for="department in departmentList"
                :key="department.id"
                :value="department.id"
            >
              {{ department.nameCn + ' [ ' + department.desc + ' ] ' + department.nameEn }}
            </a-select-option>
          </a-select>
        </div>
        <div class="role-selector">
          <a-select
              v-model:value="selectedRole"
              show-search
              placeholder="请输入角色名称搜索"
              :filter-option="false"
              :not-found-content="roleFetching ? undefined : null"
              @search="handleRoleSearch"
              @focus="handleRoleFocus"
              @blur="onRoleBlur"
              @change="(value, _option) => onRoleChange(value)"
              class="role-select"
              popupClassName="custom-dropdown"
              :disabled="isDisabled || !selectedDepartment"
              :class="{ 'new-selector-item': isRoleNew }"
          >
            <a-select-option
                v-for="role in roleList"
                :key="role.id"
                :value="role.id"
            >
              {{ role.name }}
            </a-select-option>
          </a-select>
        </div>
        <div class="business-selector">
          <a-select
              v-model:value="selectedBusiness"
              show-search
              placeholder="请输入业务名称搜索"
              :filter-option="false"
              :not-found-content="businessFetching ? undefined : null"
              @search="handleBusinessSearch"
              @focus="handleBusinessFocus"
              @blur="onBusinessBlur"
              @change="(value, _option) => onBusinessChange(value)"
              class="business-select"
              popupClassName="custom-dropdown"
              :disabled="isDisabled || !(selectedRole||isRoleNew)"
              :class="{ 'new-selector-item': isBusinessNew }"
          >
            <a-select-option
                v-for="business in businessList"
                :key="business.id"
                :value="business.id"
            >
              {{business.name}}
            </a-select-option>
          </a-select>
        </div>
      </div>

      <div class="requirement-panel-item">
        <div class="fail-mode-panel">
          <div class="title-sub">
            痛点
            <a-button
                v-if="!isDisabled"
                type="dashed"
                size="small"
                class="add-btn"
                @click="addFailMode(failModes)"
            >
              <PlusOutlined />
              添加痛点
            </a-button>
          </div>
          <div class="fail-mode-list">
            <div v-for="(failMode, index) in failModes" :key="index" class="fail-mode-item">
              <a-select
                  v-model:value="failMode.modeDesc"
                  placeholder="请输入痛点描述"
                  :filter-option="false"
                  :not-found-content="fmFetching ? undefined : null"
                  @search="(searchValue) => onFmSearch(searchValue, selectedBusinessObj?.roleCaseId)"
                  @focus="expandFailMode(failModes,index)"
                  @change="(value, _option) => onFmChange(value,failMode)"
                  @blur="onFmBlur(failMode)"
                  @dropdownVisibleChange="(_open) => isDisabled && false"
                  class="fail-mode-select"
                  popupClassName="custom-dropdown"
                  :class="{ 'expanded': fmFocusIndex === index ,
                  'new-selector-item': failMode.id===undefined && failMode.modeDesc && failMode.modeDesc.length>0 }"
                  :disabled="!(selectedBusiness || isBusinessNew)"
                  :show-search="!isDisabled"
                  :show-arrow="!isDisabled"
              >
                <a-select-option
                    v-for="fm in fmSearchList"
                    :key="fm.id"
                    :value="fm.modeDesc"
                >
                  {{ fm.modeDesc }}
                </a-select-option>
              </a-select>
              <a-button
                  v-if="!isDisabled && failModes.length > 1"
                  type="text"
                  danger
                  class="delete-btn"
                  @click.stop="removeFailMode(failModes,index)"
              >
                <DeleteOutlined />
              </a-button>
            </div>
          </div>
        </div>
        <div class="ctrl-plan-panel">
          <div class="title-sub">
            控制计划
            <a-button
                v-if="!isDisabled"
                type="dashed"
                size="small"
                class="add-btn"
                @click="addCtrlPlan(failModes,fmFocusIndex)"
            >
              <PlusOutlined />
              添加控制计划
            </a-button>
          </div>
          <div class="ctrl-plan-list">
            <div class="field-name">
              <div class="field-label1">控制要求</div>
              <div class="field-label2">容量</div>
              <div class="field-label3">时机</div>
              <div class="field-label4">反应计划</div>
            </div>
            <div class="ctrl-plan-item"
                 v-if="fmFocus"
                 v-for="(ctrlPlan, ctrlIndex) in fmFocus.ctrlPlans" 
                 :key="ctrlIndex">
              <div class="ctrl-plan-content">
                <div class="ctrl-plan-field-spec">
                  <a-select
                      v-model:value="ctrlPlan.spec"
                      placeholder="请输入控制规格/要求"
                      :filter-option="false"
                      :not-found-content="cpFetching ? undefined : null"
                      @search="(searchValue) => onCpSearch(searchValue, fmFocus?.id)"
                      @change="(value, _option) => onCpChange(value,ctrlPlan)"
                      @blur="onCpBlur(ctrlPlan)"
                      class="ctrl-plan-select"
                      popupClassName="custom-dropdown"
                      :class="{ 'new-selector-item': ctrlPlan.id===undefined && ctrlPlan.spec && ctrlPlan.spec.length>0 }"
                      :disabled="isDisabled || !(selectedBusiness || isBusinessNew)"
                      :show-search="!isDisabled"
                  >
                    <a-select-option
                        v-for="cp in cpSearchList"
                        :key="cp.id"
                        :value="cp.spec"
                    >
                      {{ cp.spec }}
                    </a-select-option>
                  </a-select>
                </div>
                <div class="ctrl-plan-field-capacity">
                  <a-select
                      v-model:value="ctrlPlan.capacityCn"
                      placeholder="请输入容量名称搜索"
                      :filter-option="false"
                      :not-found-content="capacityFetching ? undefined : null"
                      @search="(searchValue) => onCapacitySearch(searchValue)"
                      @change="(value, _option) => onCapacityChange(value,ctrlPlan)"
                      @blur="onCapacityBlur(ctrlPlan)"
                      class="ctrl-plan-select"
                      popupClassName="custom-dropdown"
                      :class="{ 'new-selector-item': ctrlPlan.id===undefined && ctrlPlan.spec && ctrlPlan.spec.length>0 }"
                      :disabled="isDisabled || !(selectedBusiness || isBusinessNew)"
                      :show-search="!isDisabled"
                  >
                    <a-select-option
                        v-for="capacity in capacityList"
                        :key="capacity.id"
                        :value="capacity.cnDesc"
                    >
                      {{ capacity.cnDesc }}
                    </a-select-option>
                  </a-select>
                </div>
                <div class="ctrl-plan-field-frequency">
                  <a-select
                      v-model:value="ctrlPlan.frequencyValues"
                      mode="multiple"
                      placeholder="请选择时机"
                      @search="(searchValue) => onFrequencySearch(searchValue)"
                      @change="(value, _option) => onFrequencyChange(value,ctrlPlan.frequencies)"
                      @blur="onFrequencyBlur(ctrlPlan)"
                      class="ctrl-plan-select"
                      :disabled="isDisabled || !(selectedBusiness || isBusinessNew)"
                      popupClassName="custom-dropdown"
                      :show-search="!isDisabled"
                      :show-arrow="!isDisabled"
                  >
                    <a-select-option
                        v-for="frequency in frequencySearchList"
                        :key="frequency.id"
                        :value="frequency.cnDesc"
                    >
                      {{ frequency.cnDesc }}
                    </a-select-option>
                  </a-select>
                </div>
                <div class="ctrl-plan-field-reactionPlan">
                  <a-select
                      v-model:value="ctrlPlan.reactionPlanValues"
                      mode="multiple"
                      placeholder="请选择反应计划"
                      @search="(searchValue) => onReactionPlanSearch(searchValue)"
                      @change="(value, _option) => onReactionPlanChange(value,ctrlPlan.reactionPlans)"
                      @blur="onReactionPlanBlur(ctrlPlan)"
                      class="ctrl-plan-select"
                      :disabled="isDisabled || !(selectedBusiness || isBusinessNew)"
                      popupClassName="custom-dropdown"
                      :show-search="!isDisabled"
                      :show-arrow="!isDisabled"
                  >
                    <a-select-option
                        v-for="reactionPlan in reactionPlanSearchList"
                        :key="reactionPlan.id"
                        :value="reactionPlan.cnDesc"
                    >
                      {{ reactionPlan.cnDesc }}
                    </a-select-option>
                  </a-select>
                </div>
              </div>

              <a-button
                  v-if="!isDisabled && fmFocus.ctrlPlans.length > 1"
                  type="text"
                  danger
                  class="delete-btn"
                  @click="removeCtrlPlan(failModes,fmFocusIndex, ctrlIndex)"
              >
                <DeleteOutlined />
              </a-button>
            </div>
          </div>
        </div>
      </div>

      <div class="requirement-panel-item" style="background: rgba(15, 23, 42, 0.01);">
        <div class="value-box">
          <div class="title-sub">价值主张</div>
          <a-textarea
              v-model:value="requirementValue"
              placeholder="请输入价值主张描述"
              :auto-size="{ minRows: 3, maxRows: 6 }"
              class="value-input"
              :disabled="isDisabled"
              :readonly="isDisabled"
          />
        </div>
      </div>

      <div class="requirement-panel-item" v-if="!isDisabled">
        <div class="btn-panel">
          <a-button type="primary" class="save-btn" @click="handleSave(props,emit)" :loading="saving">
            <SaveOutlined />
            保存
          </a-button>
        </div>
      </div>
    </div>
  </a-drawer>
</template>

// 在 DetailDrawer.vue 的 script 部分替换为：
<script setup lang="ts">
import { computed, watch } from "vue";
import { Button, Drawer, Select, Textarea } from "ant-design-vue";
import { DeleteOutlined, PlusOutlined, SaveOutlined } from "@ant-design/icons-vue";

// 导入 detailServices
import {
  // 基础数据
  fetching,
  departmentList,
  selectedDepartment,
  onDepartmentSearch,
  onDepartmentChange,
  onDepartmentBlur,

  roleFetching,
  roleList,
  selectedRole,
  isRoleNew,
  handleRoleFocus,
  handleRoleSearch,
  onRoleBlur,
  onRoleChange,

  businessFetching,
  businessList,
  selectedBusiness,
  selectedBusinessObj,
  isBusinessNew,
  handleBusinessFocus,
  handleBusinessSearch,
  onBusinessBlur,
  onBusinessChange,

  fmFetching,
  fmSearchList,
  failModes,
  fmFocusIndex,
  fmFocus,
  onFmSearch,
  onFmChange,
  onFmBlur,
  addFailMode,
  expandFailMode,
  removeFailMode,

  cpFetching,
  cpSearchList,
  onCpSearch,
  onCpChange,
  onCpBlur,
  addCtrlPlan,
  removeCtrlPlan,
  saving,

  capacityList,
  capacityFetching,
  onCapacityBlur,
  onCapacitySearch,
  onCapacityChange,

  frequencySearchList,
  onFrequencySearch,
  onFrequencyChange,
  onFrequencyBlur,

  reactionPlanSearchList,
  onReactionPlanSearch,
  onReactionPlanChange,
  onReactionPlanBlur,

  requirementValue,
  handleSave,
  initializeFromRecord,
  resetAllData,
} from './detailService.ts';

const ADrawer = Drawer;
const ASelect = Select;
const ASelectOption = Select.Option;
const ATextarea = Textarea;
const AButton = Button;

interface Props {
  mode?: 'add' | 'preview';
  record?: any;
  visible?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  mode: 'preview',
  record: null,
  visible: false,
});

const emit = defineEmits<{
  close: [];
}>();

const onClose = async () => {
  await resetAllData();
  emit('close');
};

// 计算属性
const isDisabled = computed(() => {
  return props.mode === 'preview';
});

// 监听记录变化，初始化数据
watch(() => props.record, (newRecord) => {
  if (newRecord) {
    initializeFromRecord(newRecord, props.mode);
  }
}, { immediate: true });

</script>

<style scoped>
.requirement-detail-drawer{
  display: flex;
  .delete-btn:hover{
    color: #0ea5e9;
    background: repeating-radial-gradient(
        circle at 50%,
        rgba(14, 165, 233, 0.7),
        rgba(14, 165, 233, 0.05) 40%,
        rgba(14, 165, 233, 0.01) 100%);
    border-color: rgba(14, 165, 233, 0.00);
  }
  .delete-btn{
    color: #3b82f6;
  }
  .add-btn{
    margin-left: 20px;
  }
  .requirement-panel{
    display: flex;
    flex-direction: column;
    width: 100%;
    .requirement-panel-item>*{
      flex: 1;
      padding: 10px;
    }
    .requirement-panel-item>*>*{
      width: 100%;
    }
    .requirement-panel-item{
      display: flex;
      width: 100%;

      ::v-deep(.ant-select-arrow),
      ::v-deep(.ant-select-selection-placeholder),
      ::v-deep(.ant-select-open .ant-select-selection-item),
      ::v-deep(.ant-input)::-webkit-input-placeholder {
        color: #808385 !important;
        opacity: 0.7;
      }
      ::v-deep(.ant-input),
      ::v-deep(.ant-select-selector) {
        background: rgba(15, 23, 42, 0.7) !important;
        border: 1px solid #334155 !important;
        border-radius: 8px !important;
        color: #f1f5f9 !important;
        transition: all 0.3s ease;
      }
      ::v-deep(.ant-select-selection-item) {
        background: rgba(15, 23, 42, 0) !important;
        border: 0 !important;
        color: #f1f5f9 !important;
      }
      ::v-deep(.ant-input:hover),
      ::v-deep(.ant-select-selector:hover) {
        border-color: #3b82f6 !important;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
      }
      ::v-deep(.new-selector-item .ant-select-selector) {
        border: 1px solid #eab308 !important;
        box-shadow: 0 0 0 2px rgba(234, 179, 8, 0.2) !important;
      }
      ::v-deep(.expanded.new-selector-item .ant-select-selector) {
        background: rgba(75, 250, 66, 0.05) !important;
        border: 1px solid #eab308 !important;
        box-shadow: 0 0 0 2px rgba(234, 179, 8, 0.2) !important;
      }
      ::v-deep(.ant-btn-dashed) {
        border-color: #3b82f6 !important;
        color: #3b82f6 !important;
        background: rgba(59, 130, 246, 0.1) !important;
      }
      ::v-deep(.ant-btn-dashed:hover) {
        border-color: #0ea5e9 !important;
        color: #0ea5e9 !important;
        background: rgba(14, 165, 233, 0.15) !important;
      }
      .fail-mode-panel{
        .fail-mode-list{
          background: rgba(200, 200, 200, 0.05);
          .fail-mode-item::before {
            content: '●';
            position: relative;
            left: -10px;
            top: 5px;
            color: #3b82f6;
            font-size: 12px;
            opacity: 0.7;
          }
          .fail-mode-item {
            display: flex;
            padding: 5px;
            flex-direction: row;
            .fail-mode-select{
              flex: 1;
              min-width: 70%;
            }
            .expanded {
              background: rgba(75, 250, 66, 0.05) !important;
            }
          }
        }
      }
      .ctrl-plan-panel{
        display: flex;
        flex: 2;
        flex-direction: column;
        .ctrl-plan-list{
          background: rgba(200, 200, 200, 0.05);
          width: 100%;
          .field-name>*{
            display: flex;
            justify-content: center;
          }
          .field-name{
            display: flex;
            flex-direction: row;
            margin-top: 10px;
            .field-label1{flex: 4;}
            .field-label2{flex: 1;}
            .field-label3{flex: 2;}
            .field-label4{flex: 2;}
          }

          ::v-deep(.ant-input),
          ::v-deep(.ant-select-selector) {
            background: rgba(75, 250, 66, 0.05) !important;
          }

          .ctrl-plan-item{
            display: flex;
            flex-direction: row;
            width: 100%;
            .ctrl-plan-content{
              display: flex;
              flex-direction: row;
              width: 100%;
              min-width: 80%;
              .ctrl-plan-field-spec,
              .ctrl-plan-field-capacity,
              .ctrl-plan-field-frequency,
              .ctrl-plan-field-reactionPlan{
                display: flex;
                flex-direction: column;
              }
              .ctrl-plan-field-spec{
                flex: 4;
              }
              .ctrl-plan-field-capacity{
                flex: 1;
              }
              .ctrl-plan-field-frequency{
                flex: 2;
              }
              .ctrl-plan-field-reactionPlan{
                flex: 2;
              }
            }
          }
        }
      }
      .value-box{
        .value-input:hover {
          border-color: #3b82f6 !important;
          box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
        }
        .value-input {
          background: rgba(15, 23, 42, 0.7) !important;
          border: 1px solid #334155 !important;
          border-radius: 8px !important;
          color: #f1f5f9 !important;
          transition: all 0.3s ease;
        }
      }
      .btn-panel {
        display: flex;
        background: rgba(15, 23, 42, 0.1) !important;

        .save-btn {
          width: 100px;
          border-radius: 8px;
          font-weight: 500;
          transition: all 0.3s ease;
          height: 40px;
          padding: 0 20px;
          display: flex;
          align-items: center;
          gap: 6px;
          border: none;
          position: relative;
          overflow: hidden;
          background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%);
          color: white;
          box-shadow: 0 4px 15px rgba(14, 165, 233, 0.4);
        }

        .save-btn::before {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
          transition: 0.5s;
        }

        .save-btn:hover::before {
          left: 100%;
        }

        .save-btn:hover {
          transform: translateY(-2px);
          box-shadow: 0 6px 20px rgba(14, 165, 233, 0.6);
        }
      }
    }
  }
}
</style>
<style>
.requirement-detail-drawer {
  .ant-drawer-wrapper-body {
    .ant-drawer-header {
      background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 50%, #6366f1 100%) !important;
      padding: 0;
      .ant-drawer-header-title .ant-drawer-title {
        color: rgba(255, 255, 255, 0.9);
        margin: 6px 0 6px 20px;
        font-size: 20px;
      }
    }
    .ant-drawer-header::before {
      content: '';
      position: absolute;
      top: -5%;
      left: 0;
      right: 0;
      bottom: 0;
      background: url("/akitorSys.svg");
      background-size: 100% 120%;
      opacity: 0.3;
    }
    .ant-drawer-body {
      background: linear-gradient(135deg, rgba(28, 32, 46, 0.95) 0%, #1e293b 100%) !important;
      color: white;
    }
  }
}
</style>
